<template>
  <div>
    <navigationBar/>
    <div class="context">
      <table class="preview">
        <tr >
          <td rowspan="2">
            <img class="pimg" :src="preview.pimgLink"/>
          </td>
          <td>
            <div class="pdec">{{ preview.pdec }}</div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="price-order-container">
              <span class="pprice">{{ preview.pprice }}元</span>
              <span class="create-order" @click="jumpNewOrder(pid)">立即购买</span>
            </div>
          </td>
        </tr>
      </table>
      <div class="config">
        <table class="config-table">
          <th class="config-thead" colspan="3">
            <td class="col-1">{{ col1 }}</td>
            <td class="col-2">{{ col2 }}</td>
            <td class="col-3">{{ col3 }}</td>
          </th>
          <tr class="row-container" v-for="(row, index) in config" :key="index" :title="row.itemTitle" :rows="row.itemRow">
            <td class="row-title col-1">
              {{row.itemTitle}}
            </td>
            <div class="row-content" v-for="(item, innnerIndex) in row.itemRow" :key="innnerIndex" :item="item.item" :value="item.value">
              <td class="col-2">{{ item.item }}</td>
              <td class="col-3">{{ item.value }}</td>
            </div>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: 'Detail',
  data () {
    return {
      col1: '',
      col2: '',
      col3: '',
      config: '',
      preview: '',
      pid: this.$route.query.pid
    }
  },
  methods: {
    jumpNewOrder(pid){
      window.open('./neworder?pid=' + pid)
    }
  },
  create() {
    this.getData()
  },
  created() {
    let apiurl = this.globalData.apiURL + '/product/detail?pid=' + this.pid
    axios.get(apiurl).then((res) => {
      if(res.status === 200){
        this.config = res.data.config
        this.preview = res.data.preview
        this.col1 = '分类'
        this.col2 = '名称'
        this.col3 = '配置'
      } else {
        this.col1 = '哎呀'
        this.col2 = '数据丢失了！'
        this.col3 = '刷新一下试试？'
      }
    }, (error) => {
      if(window.confirm(String(error) + '\n\n请求' + apiurl + '出错了，要展示静态数据吗？')){
        let data = require('@/assets/' + 'detail.json')
        this.config = data.config
        this.preview = data.preview
        this.col1 = '分类'
        this.col2 = '名称'
        this.col3 = '配置'
      } else {
        this.col1 = '哎呀'
        this.col2 = '数据丢失了！'
        this.col3 = '刷新一下试试？'
      }
    })
  }
}
</script>

<style>
.context {
  margin-top: 55px;
}
.preview {
  margin: auto;
  width: 80vw;
}
.pimg {
  height: 50vh;
}
.pdec {
  width: 500px;
  text-align: left;
  word-break: break-all;
  word-wrap: break-word;
  font-size: larger;
  font-weight: 800;
}

.price-order-container {
  text-align: center;
  padding: 5px;
}
.pprice {
  font-size: large;
  font-style: italic;
  font-weight: bolder;
  color: #ff5000;
  margin-right: 5px;
  padding-top: 5px;
}
.create-order {
  user-select: none;
  color: rgb(240, 246, 255);
  font-style: normal;
  font-size: large;
  font-weight: 1000;
  width: 60px;
  padding: 10px 30px;
  border-radius: 10px;
  background: linear-gradient(90deg, #0022ff, #002ead);
}

.config-table {
  text-align: center;
  margin: auto;
  border: #123550b8 solid 2px;
}
.config-thead {
  border-bottom: #123550b8 solid 2px;
  background-color:#c0e0f780;
}
.col-1 {
  width: 15vw;
}
.col-2 {
  width: 15vw;
}
.col-3 {
  width: 45vw;
}
.row-content {
  width: 100%;
}
.row-container {
  border: 1px solid #00ccff46;
}
table.config-table :nth-child(2n+1).row-container{
  background-color:#c0e0f780;
}
table.config-table :nth-child(2n+2).row-container{
  background-color:#defcfe80;
}

</style>
